<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="./layui/layui.js"></script>
  <script src="./js/global.js"></script>
  <style>
      .layui-table-page{
          text-align: center;
      }
  </style>
</head>
<body>
  <!-- 多条件查询 -->
  <form class="layui-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label" style="width: auto;">姓名</label>
        <div class="layui-input-inline">
          <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width: auto;">性别</label>
        <div class="layui-input-inline">
          <select name="sex" lay-verify="required">
            <option value="">全部</option>
            <option value="0">男</option>
            <option value="1">女</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width: auto;">部门</label>
        <div class="layui-input-inline">
          <select name="deptId" lay-verify="required">
            <option value="">请选择部门</option>
            <option value="1">研发部</option>
            <option value="2">营销部</option>
            <option value="3">运维部</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width: auto;">职务</label>
        <div class="layui-input-inline">
          <select name="dutyId" lay-verify="required">
            <option value="">请选择职务</option>
            <option value="1">Java开发</option>
            <option value="2">前端开发</option>
            <option value="3">UI设计</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn layui-btn-normal">查询</button>
      </div>
    </div>
  </form>

  <!-- 表格 -->
  <table  id="empList">
  </table>

  <!-- 修改弹出层 -->
  <div id="modifyLayer" style="display: none;margin-top: 30px;margin-right: 40px; width: 400px;">
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
          <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男" checked>
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">身高</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入身高" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-block">
          <input type="text" name="phone" required lay-verify="required" placeholder="请输入联系方式" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">入职时间</label>
        <div class="layui-input-inline">
          <input type="text" name="hiredate" class="layui-input" id="hiredate" placeholder="请选择入职时间" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
          <select name="deptId" lay-verify="required">
            <option value="">请选择部门</option>
            <option value="1">研发部</option>
            <option value="2">营销部</option>
            <option value="3">运维部</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">职务</label>
        <div class="layui-input-inline">
          <select name="dutyId" lay-verify="required">
            <option value="">请选择职务</option>
            <option value="1">Java开发</option>
            <option value="2">前端开发</option>
            <option value="3">UI设计</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="register"
            style="width: 180px;">修&nbsp;&nbsp;&nbsp;&nbsp;改</button>
        </div>
      </div>
    </form>
  </div>

  <script>
    layui.use(['layer', 'laypage', 'laydate', 'table'], function () {
      var layer = layui.layer
      var laypage = layui.laypage;
      var $ = layui.jquery
      var laydate = layui.laydate;
      var table = layui.table;

      table.render({
        elem: '#empList'
        ,url: BASE_URL + '/emp/list' //数据接口
        ,page: true //开启分页
        ,limit:5
        ,limits:[5,10,15]
        ,cols: [[ //表头
            {field: 'id', title: '序号', align:'center', type:'numbers', sort:true, width:80}
            ,{field: 'name', title: '姓名', align:'center'}
            ,{field: 'age', title: '年龄', align:'center'} 
            ,{field: 'sex', title: '性别', align:'center'} 
            ,{field: 'height', title: '身高', align:'center'} 
            ,{field: 'phone', title: '联系方式', align:'center'} 
            ,{field: 'hiredate', title: '入职时间', align:'center'} 
            ,{field: 'dept', title: '部门', align:'center',templet:function(data){
                return data.dept.deptname;
            }}
            ,{field: 'duty', title: '职务', align:'center',templet:function(data){
                return data.duty.dutyname;
            }}
            ,{field: 'id', title: '操作', align:'center', width:220 ,templet:function(data){
                var str = `<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="doModify(${data.id})">编辑</button>`
                if(data.username != 'admin'){
                    str += `
                    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="doDelete(${data.id})">删除</button>
                    `
                }
                return str;
            }}
        ]]
      })

      //执行一个laydate实例
      laydate.render({
        elem: '#hiredate' //指定元素
      });

    });

    /**
     * 删除
     */
    function doDelete() {
      layui.use('layer', function () {
        var layer = layui.layer
        var $ = layui.jquery
        layer.confirm('确定要删除吗？', { icon: 3, title: '提示信息' }, function (index) {

          layer.close(index)
        });
      })
    }

    /**
     * 修改
     */
    function doModify() {
      layui.use(['layer', 'form'], function () {
        var layer = layui.layer
        var $ = layui.jquery
        var form = layui.form

        layer.open({
        	type: 1,
          	title: '修改员工信息',
          	content: $("#modifyLayer")
        });

      })

    }
  </script>
</body>
</html>